<template>
    <require from="./em-channel-task.css"></require>
    <div class="em-channel-task">
        <div show.bind="filterLbls.length > 0" class="ui basic segment lbl-filter">
            <div scrollbar="scrollbar-macosx">
                <div class="ui labels">
                    <a show.bind="showClearLblFilter" title="清除筛选标签" class="ui red label"
                        click.delegate="clearLblFilterHandler()">
                        清除
                        <i class="delete icon"></i>
                    </a>
                    <a show.bind="!showClearLblFilter" title="选择筛选标签" class="ui blue label">
                        筛选
                        <i class="filter icon" style="margin-left: .5em; margin-right: 0;"></i>
                    </a>
                    <a repeat.for="lbl of filterLbls | sort:'name'" class="ui ${lbl.active ? 'blue' : ''} label"
                        click.delegate="lblFilterHandler(lbl)">
                        ${lbl.name}
                    </a>
                </div>
            </div>
        </div>
        <div ref="containerRef" class="ui equal width internally celled grid">
            <div class="row">
                <div class="column" repeat.for="col of cols">
                    <h4 class="ui top attached center aligned header">
                        ${col.name}（${col.page.totalElements ? col.page.totalElements : 0}）
                        <div if.bind="!isAt" ref="filterRef" class="ui inline dropdown tms-task-filter" title="按任务关联人过滤"
                            data-col-name="${col.name}" task.bind="initFilterHandler(filterRef, col)">
                            <i class="filter icon"></i>
                            <div class="text"></div>
                            <div class="menu">
                                <div class="ui icon search input">
                                    <i class="search icon"></i>
                                    <input type="text" placeholder="过滤查找...">
                                </div>
                                <div class="divider"></div>
                                <div class="header">按任务关联人过滤</div>
                                <div class="scrolling menu">
                                    <div class="item" data-value="all">
                                        全员
                                        <i class="red link remove icon" title="清除过滤条件"></i></div>
                                    <template repeat.for="item of channel.members">
                                        <div if.bind="item.enabled" class="item" data-value="${item.username}">
                                            ${item.name ? item.name : item.username}
                                            <i class="red link remove icon" title="清除过滤条件"></i>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <span class="btn-wrapper">
                            <button click.delegate="addHandler(col)" title="创建任务"
                                class="mini circular ui icon basic button">
                                <i class="plus icon"></i>
                            </button>
                            <button click.delegate="refreshHandler(col)" title="刷新同步"
                                class="mini circular ui icon basic button">
                                <i class="refresh icon"></i>
                            </button>
                        </span>
                    </h4>
                    <div scrollbar="scrollbar-macosx" class="ui basic segment tms-dd-container s-${col.value}"
                        data-sts="${col.name}">
                        <div repeat.for="item of col.page.content" show.bind="!item._hidden"
                            class="ui green segment tms-dd-task-item" data-id="${item.id}"
                            mouseenter.trigger="mouseenterHandler(item)">
                            <em-channel-task-item-header is-at.bind="isAt" task-item.bind="item" channel.bind="channel">
                            </em-channel-task-item-header>
                            <div data-id="${item.id}" data-case="task" data-from="${col.name}" ref="mkbodyRef" fancybox
                                class="text markdown-body fr-view"
                                innerhtml.bind="item.content | parseMd:channel | emoji:mkbodyRef"></div>
                            <em-channel-task-item-footer task-item.bind="item" channel.bind="channel"
                                login-user.bind="loginUser" is-at.bind="isAt" col.bind="col">
                            </em-channel-task-item-footer>
                            <i style="position: absolute; right: 0; bottom: 5px;"
                                if.bind="!isAt && (channel.creator.username == loginUser.username)" title="从看板移除该任务"
                                click.delegate="removeHandler(item, col)"
                                class="remove circle outline big red link icon"></i>
                            <i style="position: absolute; right: 0; bottom: 5px;"
                                if.bind="isAt && (item.creator.username == loginUser.username)" title="从看板移除该任务"
                                click.delegate="removeHandler(item, col)"
                                class="remove circle outline big red link icon"></i>
                        </div>
                    </div>
                    <div if.bind="col.page && !col.page.last" click.delegate="moreHandler(col)"
                        style="padding-top: 6px; padding-bottom: 6px;"
                        class="basic ui fluid button ${col.ajax && col.ajax.readyState != 4 ? 'tms-disabled2' : ''}"><i
                            show.bind="col.ajax && col.ajax.readyState != 4" class="spinner loading icon"></i>
                        加载更多(${col.moreCnt})</div>
                </div>
            </div>
        </div>
    </div>
    <em-channel-chat-task-talk-modal channel.bind="channel" view-model.ref="talkVm"></em-channel-chat-task-talk-modal>
    <em-channel-task-create is-at.bind="isAt" channel.bind="channel" view-model.ref="addVm"></em-channel-task-create>
</template>
